/*
 * @Date: 2022-01-28 08:27:42
 * @LastEditTime: 2022-01-29 09:49:07
 */
// 导入本地 设置token 获取token 删除token的方法
import { getLocalToken, setLocalToken, removeLocalToken, setTimeStamp } from '@/utils/auth'
// 导入登录 API
import { loginAPI, getUserInfoAPI, getUserDetailByIdAPI } from '@/api'
import { resetRouter } from '@/router'
// 状态
const state = {
  userToken: getLocalToken(), // 页面一刷新 就从本地获取token值
  userInfo: {} // {}.name是undefined不会报错；null.name会报错 所以初始值是{} 会在getters中引用userInfo 如果是null会报错
}
// 状态
const mutations = {
  // 通过mutations修改state里面的userToken
  setToken(state, token) {
    state.userToken = token // 修改state token值
    setLocalToken(token) // vuex值发生变化  本地存储token也发生变
  },

  // 通过mutations删除state里面的userToken
  removeToken(state) {
    state.userToken = null // vuex的token 设置为空
    removeLocalToken() // 删除本地存储的token值
  },
  // 修改用户信息
  setUserInfo(state, res) {
    state.userInfo = res // 这样是响应式
    // state.userInfo['name'] = userInfo.name 这样不是响应式
    // state.userInfo = { ...res } 这样是响应式
  },
  // 用户退出 删除信息
  removeUserInfo(state) {
    state.userInfo = {} // 也是一个空对象
  }
}

// 进行异步操作
const actions = {
  // 1. 调登录接口 发请求

  //   // login是actions里面的方法 两个参数 context 相当于this.$store; data是载荷 调用actions里面的方法时传递的参数
  async login(context, data) {
    //        1. 等待发起请求 拿到用户数据
    const res = await loginAPI(data)
    // console.log(res) // 如果响应拦截器 的响应部分是空的，那么这里就是一个对象 嵌套data 里面还有一个data 最终里面有 success是true
    //     // 如果是多层data 就要进行success判断 如果是true 就调用数据
    //     // 如果不是多层data 就直接提交 响应拦截器已经处理好了 success是false的情况就报错
    //        2. 才去调用setToken方法
    context.commit('setToken', res)
    // if (res.data.success) {
    // }
    //     // 3. 有token了 存时间戳
    setTimeStamp()
  },

  // 2. 调获取用户信息接口
  // 这个方法是actions的方法
  async getUserInfo(context) {
    // 这个方法是调接口
    try {
      const res1 = await getUserInfoAPI()
      // console.log(res1)
      // res 是返回的数据里面的data 在utils/request.js里面解构的
      const res2 = await getUserDetailByIdAPI(res1.userId)
      // 合并数据
      const res3 = { ...res1, ...res2 }
      // 调用mutations
      context.commit('setUserInfo', res3)
      // context.commit('setUserInfo', { ...res1, ...res2 })
      return res1 // 这里为什么return 为了后面的权限处理做伏笔 不然这里不用写
    } catch (err) {
      console.log(err)
    }
  },
  //
  // 3. 调取 退出接口
  logout(context) {
    // 删除用户token
    context.commit('removeToken')
    // 删除用户信息
    context.commit('removeUserInfo')

    // 重置路由 动态路由表的router 是router/index.js 里面的router
    resetRouter()

    // 删除permission里面的route
    // 本来没加命名空间时，mutations 和 actions是挂载全局 可以随意访问的 =》加了 就不能随意访问了
    // 加了命名空间=》子模块调用 =》 子模块里面的方法 =》 这里context是user模块 =》但是加了{root: true} =》 表示当前的context是全局 =》访问index.js =》但index.js里面没有setRoutes =》permission/setRoutes
    context.commit('permission/setRoutes', [], { root: true })
  }
}

export default {
  namespaced: true,
  // state: state,
  // mutations: mutations,
  // actions: actions
  state,
  mutations,
  actions
}
